<template>
  <div ref="chartDom" class="chart"></div>
</template>
<script setup>
import { ref, watch, defineProps, nextTick,onUnmounted } from "vue";
import * as echarts from "echarts";
let myChart = null;
const chartDom = ref(null);
const props = defineProps({
  option: {
    type: Object,
    default: () => {},
  },
});
nextTick(() => {
  myChart = echarts.init(chartDom.value);
  setChart()
  window.addEventListener("resize", () => {
    myChart.resize();
  });
});
watch(props.option, () => {
    setChart()
});

onUnmounted(()=>{
    myChart.clear()
})

function setChart() {
  if (Object.keys(props.option).length > 0) {
    myChart.setOption(props.option);
  }
}

</script>
<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>